---
title: Maps
icon: fa fa-map-marker
cdnjs:
- //maps.google.com/maps/api/js?sensor=true
- //cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.12/gmaps.min.js
scripts:
- Metis.MetisMaps()
---
<style>
  .FlexEmbed-item {
  height: 300px;
}
</style>
<div class="row">
    <div class="col-lg-6">
	<div class="box">
	    <header><h5>Basic Maps</h5></header>
	    <div class="body">
	    <div class="FlexEmbed FlexEmbed--4by3">
		  <div id="gmaps-basic" class="FlexEmbed-item"></div>
	      </div>
	    </div>
	</div>
    </div>
    <div class="col-lg-6">
	<!-- .box -->
	<div class="box warning">
	    <header>
		<h5>Map with markers</h5>
	    </header>
	    <div class="body">
	      <div class="FlexEmbed FlexEmbed--4by3">
		  <div id="gmaps-marker" class="FlexEmbed-item"></div>
	      </div>
	    </div>
	</div>
	<!-- /.box -->
    </div>
</div>
<!-- /.row -->

<div class="row">
    <!-- .col-lg-6 -->
    <div class="col-lg-6">
	<!-- .box -->
	<div class="box inverse">
	    <header>
		<h5>Geolocation</h5>
	    </header>
	    <!-- .body -->
	    <div class="body">
	    <div class="FlexEmbed FlexEmbed--4by3">
		<div id="gmaps-geolocation" class="FlexEmbed-item"></div>
	    </div>

	    </div>
	    <!-- /.body -->
	</div>
	<!-- /.box -->
    </div>
    <!-- /.col-lg-6 -->
    <!-- .col-lg-6 -->
    <div class="col-lg-6">
	<!-- .box -->
	<div class="box primary">
	    <header>
		<h5>Polylines</h5>
	    </header>
	    <!-- .body -->
	    <div class="body">
	      <div class="FlexEmbed FlexEmbed--4by3">
		  <div id="gmaps-polylines" class="FlexEmbed-item"></div>
	      </div>
	    </div>
	    <!-- /.body -->
	</div>
	<!-- /.box -->
    </div>
    <!-- /.col-lg-6 -->
</div>
<!-- /.row -->

<div class="row">
    <!-- .col-lg-6 -->
    <div class="col-lg-6">
	<!-- .box -->
	<div class="box success">
	    <header>
		<h5>Routes</h5>
	    </header>
	    <!-- .body -->
	    <div class="body">
	      <div class="FlexEmbed FlexEmbed--4by3">
		  <div id="gmaps-route" class="FlexEmbed-item"></div>
	      </div>
	    </div>
	    <!-- /.body -->
	</div>
	<!-- /.box -->
    </div>
    <!-- /.col-lg-6 -->
    <!-- .col-lg-6 -->
    <div class="col-lg-6">
	<!-- .box -->
	<div class="box danger">
	    <header>
		<h5>Geocoding</h5>

		<div class="toolbar">
		    <form method="post" id="geocoding_form" class="form-search">
		      <div class="input-group">
		      <input id="address" name="address" class="form-control input-sm" type="text" placeholder="search ..">
		      <span class="input-group-btn">
			<button type="submit" class="btn btn-default btn-sm">Search</button>
		      </span>
		      </div>
		    </form>
		</div>
	    </header>
	    <!-- .body -->
	    <div class="body">
	      <div class="FlexEmbed FlexEmbed--4by3">
		<!-- #gmaps-geocoding.google-maps -->
		  <div id="gmaps-geocoding" class="FlexEmbed-item"></div>
		<!-- /#gmaps-geocoding.google-maps -->
	      </div>
	    </div>
	    <!-- /.body -->
	</div>
	<!-- /.box -->
    </div>
    <!-- /.col-lg-6 -->
</div>
<!-- /.row -->
